<template>
    <div>
        <!--顶部搜索框-->
        <div style="display: flex ; justify-content: center;margin-top: 10px">
            <el-input
                    placeholder="通过用户名搜索用户..."
                    prefix-icon="el-icon-search"
                    style="width: 400px ;margin-right: 10px"
                    v-model="keywords"></el-input>
            <el-button icon="el-icon-search" type="primary" @click="searchAdmin">搜索</el-button>
        </div>
        <!--卡片部分-->
        <div class="admin-container">
            <el-card class="admin-card" v-for="(admin,index) in admins" :key="index">
                <!--卡片标题 start-->
                <div slot="header" class="clearfix">
                    <span>{{admin.name}}</span>
                    <el-button style="float: right; padding: 3px 0 ; color: red"
                               type="text"
                               @click="deleteAdmin(admin)"
                               icon="el-icon-delete"></el-button>
                </div>
                <!--头像-->
                <div>
                    <div class="img-container">
                        <img :src="admin.userFace" :alt="admin.name" :title="admin.name" class="userFace-img">
                    </div>
                </div>
                <!--用户信息部分-->
                <div>
                    <div class="userInfo-container">
                        <div>用户名: {{admin.name}}</div>
                        <div>手机号码: {{admin.phone}}</div>
                        <div>电话号码: {{admin.telephone}}</div>
                        <div>地址: {{admin.address}}</div>
                        <div>用户状态:
                            <el-switch
                                    v-model="admin.enabled"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    @change="enabledChange(admin)"
                                    active-text="启用"
                                    inactive-text="禁用">
                            </el-switch>
                        </div>
                        <div>用户角色:
                            <el-tag
                                    style="margin-right: 10px"
                                    type="success"
                                    v-for="(role,indexj) in admin.roles"
                                    :key="indexj">
                                {{role.nameZh}}
                            </el-tag>
                            <!--弹出框-->
                            <el-popover
                                    placement="right"
                                    title="角色列表"
                                    width="200"
                                    @show="showPop(admin)"
                                    @hide="hidePop(admin)"
                                    trigger="click">

                                <el-select v-model="selectRoles" multiple placeholder="请选择">
                                    <el-option
                                            v-for="(r,index) in allRoles"
                                            :key="index"
                                            :label="r.nameZh"
                                            :value="r.id">
                                    </el-option>

                                </el-select>
                                <el-button slot="reference" type="text" icon="el-icon-more"></el-button>
                            </el-popover>
                        </div>
                        <div>备注: {{admin.remark}}</div>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SysAdmin",
        data() {
            return {
                //顶部搜索框绑定的值
                keywords: '',
                //卡片数组
                admins: [],
                //全部角色
                allRoles: [],
                //选中的角色数组
                selectRoles: [],
            }
        },
        methods: {
            /**
             * 初始化卡片数据
             */
            initAdmins() {
                this.getRequest('/system/admin/getAllAdmins/?keywords=' + this.keywords).then(res => {
                    if (res) {
                        this.admins = res;
                    }
                })
            },


            /**
             * 搜索用户
             */
            searchAdmin() {
                this.initAdmins();
            },

            /**
             * 删除用户
             * @param admin对象
             */
            deleteAdmin(admin) {
                this.$confirm('此操作将永久删除该【' + admin.name + '】角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest(' /system/admin/deleteAdmin/' + admin.id).then(res => {
                        if (res) {
                            this.initAdmins();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            /**
             * 更改用户状态
             * @param admin
             */
            enabledChange(admin) {
                //设置admin的authorities为空，防止更新角色时后台报错
                admin.authorities = [];
                this.putRequest('/system/admin/updateAdmin', admin).then(res => {
                    if (res) {
                        this.initAdmins();
                    }
                })

            },

            /**
             * 获取全部角色
             */
            initAllRoles() {
                this.getRequest('/system/admin/getAllRoles').then(res => {
                    if (res) {
                        this.allRoles = res;
                    }
                })
            },

            /**
             * 展示多选框时触发的事件，查询全部角色
             * @param admin
             */
            showPop(admin) {
                this.initAllRoles();
                let roles = admin.roles;
                this.selectRoles = [];
                roles.forEach(r => {
                    this.selectRoles.push(r.id);
                })
            },

            /**
             * 隐藏多选框时触发的事件，更改操作员角色
             * @param admin
             */
            hidePop(admin) {
                let roles = [];
                Object.assign(roles, admin.roles);
                let flag = false;
                if (roles.length !== this.selectRoles.length) {
                    flag = true;
                } else {
                    for (let i = 0; i < roles.length; i++) {
                        let role = roles[i];
                        for (let j = 0; j < this.selectRoles.length; j++) {
                            let sr = this.selectRoles[j];
                            if (role.id === sr) {
                                roles.splice(i, 1);
                                i--;
                                break;
                            }
                        }

                    }
                    if (roles.length !== 0) {
                        flag = true;
                    }
                }

                if (flag) {
                    let url = '/system/admin/updateAdminRole?adminId=' + admin.id;
                    this.selectRoles.forEach(sr => {
                        url += '&rids=' + sr;
                    });
                    this.putRequest(url).then(res => {
                        if (res) {
                            this.initAdmins();
                        }
                    })
                }
            }
        },
        mounted() {
            this.initAdmins();
        }


    }
</script>

<style>
    .admin-card {
        width: 350px;
        margin-bottom: 20px;
    }

    .admin-container {
        display: flex;
        margin-top: 10px;
        justify-content: space-around;
        /*自动换行*/
        flex-wrap: wrap;
    }

    .userFace-img {
        width: 72px;
        height: 72px;
        border-radius: 72px;
    }

    .img-container {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .userInfo-container {
        font-size: 12px;
        color: cornflowerblue;
    }
</style>
